<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>用户登录界面</title>
    <link rel="stylesheet" href="__CSS__/layui.css" />
    <script type="text/javascript" src="__JS__/jquery-3.4.1.js"></script>
    <script type="text/javascript" src="__JS__/3.1.1/layer.js"></script>
    <script type="text/javascript" src="__JS__/layui.js"></script>
    <style type="text/css" media="screen">
        *{
            margin: 0;
            padding: 0;
        }
        html,body{
            width: 100%;
            height: 100%;
        }
        body{
            display: flex;
            justify-content: center;
            align-items: center;
        }
        label{
            color: white;
        }
    </style>
</head>
<body background="__IMAGE__/user_login.jpg" style="background-size: 100%" >
<form class="" action="">
    <h1 style="margin-left:45%;margin-top:-20%">用户登录</h1>
    <div class="layui-form-item  layui-col-md12">
        <label class="layui-form-label">用户名：</label>
        <div class="layui-input-block">
            <input type="text" name="user" placeholder="请输入账号" class="layui-input">
        </div>
    </div>
    <div class="layui-form-item layui-col-md12">
        <label class="layui-form-label">密码：</label>
        <div class="layui-input-block">
            <input type="password" placeholder="请输入密码" name="psd" class="layui-input">
        </div>
    </div>
    <form class="" action="">
    <div class="layui-form-item  layui-col-md12 ">
        <label class="layui-form-label" >验证码：</label>
        <div class=" layui-col-md4">
            <input type="text" name="captcha" placeholder="点击右边图标更换"class="layui-input">
        </div>
        <img src="{:captcha_src()}" id="img" style="margin-left: 2%;width: 100px; height: 40px">
        <button type="button" onclick="f5()" class="layui-btn" style="margin-left: 88%;margin-top:-13%"><i class="layui-icon layui-icon-refresh-3"></i> </button>
    </div>
    <div class="layui-form-item layui-col-md12">
        <div class="layui-input-block">
            <input type="button" name="login" class="layui-btn layui-btn-fluid  layui-btn-radius"  value="登录" />
        </div>
        <div class="layui-input-block">
            <a href="{:url('Register/register')}">  <input type="button" class="layui-btn layui-btn-fluid layui-btn-normal layui-btn-radius" style="margin-top: 2%"  value="注册"/> </a>
        </div>
        <div class="layui-input-block">
            <a href="{:url('find/f')}">  <input type="button" class="layui-btn layui-btn-fluid layui-btn-normal layui-btn-radius" style="margin-top: 2%"  value="忘记密码"/> </a>
        </div>
    </div>
</form>
</form>
</body>
<script type="text/javascript">
    $(function () {
        $('input[name=login]').click(function () {
            var user=$('input[name=user]').val();
            var psd=$('input[name=psd]').val();
            var captcha=$('input[name=captcha]').val();
            if (user==""){
                layer.msg('账号为空');
                return false;
            }
            if (psd==""){
                layer.msg('密码为空');
                return false;
            }
            if (captcha==""){
                layer.msg('验证码为空');
                return false;
            }
            $.ajax({
                type:"POST",//提交方式
                url:"login",//提交地址
                data:{
                    user:user,
                    psd:psd,
                    captcha:captcha
                },//提交数据
                dataType:'json',//返回格式
                success:function (data) {
                    if (data.res==1){
                        layer.msg(data.msg,{time:1000},function () {
                            $("img").attr('src',"/captcha.html?"+Math.random());
                        });
                    }
                    if (data.res==2){
                        layer.msg(data.msg,{time:1000},function () {
                            window.location.href="/blog";
                        });
                    }
                    if (data.res==3){
                        layer.msg(data.msg,{time:1000},function () {
                            history.go(0);
                        });
                    }
                }
            })
        })
    })
    function f5() {                             //随机验证码的生成
        $("img").attr('src',"/captcha.html?"+Math.random());
    }
</script>
</html>